<template>

    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'员工打款'" :autoBack="true"
        leftIconColor="$uni-text-color" :bgColor="'#ffffff'"
        :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <!-- <view class="max_box" > -->
        <fui-sticky range :top="`${safeAreaInsets?.top + 44}`" >
            <!-- 搜索 && 是否结算 盒子 -->
            <view class="fui-title"  >
                <view class="top_box">

                    <!-- 搜索组件 -->
                    <view class="area search_box">
                        <s-search-keyword :border="'1px solid rgba(0, 56, 247, 0.3)'" :placeholder="'搜索员工'"
                            @searchKeyWord="searchKeyWord"></s-search-keyword>
                        <!-- 列表 -->
                        <view class="area menu">
                            <up-tabs :list="state.menulist" @click="menulistclick" :current="state.currentTab"
                                :lineWidth="16"
                                :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
                                :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"></up-tabs>
                        </view>
                    </view>
                </view>
                
            </view>
        <template v-slot:content>
            <view class="content">
                <view class="blank_box" v-if="fit == true && state.status == 0">
                    <view class="blank_box_btn" @tap="editpop('man_hour')">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_gongshi.png`"
                            mode="aspectFill" />
                        <view>工时修改</view>
                    </view>
                    <view class="blank_box_btn" @tap="editpop('salary')">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_piliangshezhi.png`"
                            mode="aspectFill" />
                        <view>批量设置金额</view>
                    </view>
                </view>
                <view  v-else class="blank_box_button" :style="state.status == 0?'height:110rpx':'height:22rpx'">
                    <view class="blank_box_btn" @tap="batchSetting" v-if="state.status == 0">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/bancidetails_icons_piliangguanli@2.png`"
                            mode="aspectFill" />
                        <view>批量设置</view>
                    </view>
                </view>
                <fui-sticky :top="`${safeAreaInsets?.top + 120}`" class="aba"  >
                    <view class="Total_box" >
                        <view class="Total_box_left">
                            <view class="Total_staff">共 <text>{{ personLength }}</text> 人</view>
                            <view class="Total_staff">共 <text>{{ totals }}</text> 元</view>
                        </view>
                    </view>
                </fui-sticky>
                <!-- 共计金额 -->
         
                <view class="add_area area" v-if="list.length">

                    <view class="scroll_box" :style="state.status !== 0?'padding-top:20rpx':''">
                        <view v-for="(i,index) in list" :key="i.id" >
                            <fui-sticky :top="`${safeAreaInsets?.top + 172}` "  >
                                <view class="list_item_title"  >
                                    <view class="left">
                                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`"
                                            mode="scaleToFill" v-if="i.source == 1" />
                                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`"
                                            mode="scaleToFill" v-else />
                                        <view class="titlename">{{ i.title }}</view>
                                        <view class="image_box"  @click.prevent="addAndSubtract(i)" v-if="i.source == 2 && state.status == 0">
                                            <view>+加减班</view>
                                        </view>
                                    </view>
                                    <view class="right" v-if="i.source == 2">分佣：<text>￥{{ i.agent_commission_text }}</text>
                                    </view>
                                </view>
                            </fui-sticky>
                            <!-- 代理商金额修改 -->
                            <view class="agent_money" v-if="i.source == 2">
                                <view class="left">
                                    <view class="left_title" >
                                        代理商金额(男/女)：
                                        <text v-if="!i.agent">
                                                ￥{{ i.schedule.agent_man_salary }}
                                            </text>
                                            <text v-else>
                                                ￥{{ i.agent.agent_man_salary_max }}
                                            </text>
                                            /
                                            <text v-if="!i.agent">
                                                ￥{{ i.schedule.agent_woman_salary }}
                                            </text>
                                            <text v-else>
                                                ￥{{ i.agent.agent_woman_salary_max }}
                                            </text>

                                    </view>
                                </view>
                                <view class="right" @tap="editAgentMoney(i)" v-if="i.schedule.state <= 1">
                                    <image
                                        :src="`${baseUrl}/uploads/uniapp_image/user_v1/shangjixiangqing_icon_xiugaijine@2.png`"
                                        mode="scaleToFill" />
                                    <view>修改</view>
                                </view>
                            </view>
                            <view class="agent_money" v-if="i.source == 2">
                                <view class="left">
                                    <view :class="!i.agent || (i.agent && i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">{{!i.agent || (i.agent && i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0)?'未设置':'已设置' }}</view>
                                    <image
                                        :src="`${baseUrl}/uploads/uniapp_image/user_v1/wodedaili_icon_jine@2.png`"
                                        mode="scaleToFill" /> 
                                    <view class="left_title" >
                                        代招工金额(男/女)：
                                        <text v-if="!i.agent">
                                                ￥{{ i.schedule.agent_man_salary }}
                                            </text>
                                            <text v-else>
                                                <template v-if="i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0">
                                                ￥{{ i.agent.agent_man_salary_max }}
                                                </template>
                                                <template v-else>
                                                ￥{{ i.agent.agent_man_salary }}
                                                </template>
                                            </text>
                                            /
                                            <text v-if="!i.agent">
                                                ￥{{ i.schedule.agent_woman_salary }}
                                            </text>
                                            <text v-else>
                                                <template v-if="i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0">
                                                ￥{{ i.agent.agent_woman_salary_max }}
                                                </template>
                                                <template v-else>
                                                ￥{{ i.agent.agent_woman_salary }}
                                                </template>
                                            </text>

                                    </view>
                                </view>
                            </view>
                            <view class="list_item" v-for="(item, index) in i.list" :key="index">
                                <!-- 选择按钮 -->
                                <view class="select_image" @tap="moreSelect(item)" v-if="fit == true">
                                    <image :src="item.is_selected ? `${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png` : `${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`
                                        " mode="scaleToFill" />
                                </view>
                                <!-- 头像 -->
                                <view class="head_box">
                                    <image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
                                </view>
                                <!-- 信息盒子 -->
                                <view class="message_box">
                                    <view class="message_title">{{ item.user.nickname }}</view>
                                    <view class="message_identity">
                                        {{ item.user.authentication.identity_id }}
                                        {{ item.user.gender == 0 ? '女' : '男' }}
                                        <view class="phone_image">
                                            <image @tap="dialPhone(item)" :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon03.png`"
                                            mode="scaleToFill" />
                                        </view>
                                    </view>
                                    <view class="mes_flex">
                                        <view class="message_time">
                                            <view v-if="item.attendance.length" v-for="(i, index) in item.attendance"
                                                :key="index">
                                                {{ i.type == 1 ? '上午' : '下午' }}:{{ i.clocking_time }}
                                            </view>
                                            <view class="message_time" v-else>
                                                暂无打卡数据
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <!-- 金额 -->
                                <view class="add_right"  v-if=" state.status == 0 " >
                                    <!-- v-if="fit == true" -->
                                    <view class="gold_coin" v-if="i.source == 2 ? false : true">
                                        <text>￥</text>
                                        <view>
                                            <u-input type="digit" :color="i.source == 2 ? '#666' : '#0038F7'"
                                                v-model="item.salary" @blur="money_change(item, $event)"></u-input>
                                        </view>
                                    </view>
                                    <view class="disabled_gold_coin" v-else>￥{{ item.salary }}</view>
                                    <view class="gold_coin yellow"
                                        :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_gongshixiugai.png)` }">
                                        <u-input color="#F7AF00" v-model="item.man_hour" type="digit"
                                            @blur="labor_hour_change(item, $event)"></u-input>
                                        <text>小时</text>
                                    </view>

                                </view>
                                <view class="add_right" v-else>
                                    <view class="disabled_gold_coin" >￥{{ item.salary }}</view>
                                    <view class="disabled_gold_coin" >{{ item.man_hour }} 小时</view>
                                </view>
                            </view>
                        </view>

                        <!-- 正在加载组件 -->
                        <view>
                            <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                                ref="loadmoreRef"></s-loadmore-gather>
                        </view>
                    </view>   
                
                </view>
                <view class="nocontent" v-else>
                    <u-empty marginTop="30%" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
                        text="暂无内容"></u-empty>
                </view>
                <!-- 底部占位盒子 -->
                <view class="end_box" v-if="fit == true && state.status == 0">
                    <!-- 全选按钮盒子 -->
                    <view class="check_all_box">
                        <!-- 全选按钮 -->
                        <view class="check_all_button" @tap="checkAllInteraction">
                            <view class="select_image">
                                <image v-if="checkAll === true"
                                    :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                                    mode="scaleToFill" />
                                <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                                    mode="scaleToFill" />
                            </view>
                            <view>全选</view>
                        </view>

                        <!-- 已选择 -->
                        <view class="selected_box">
                            <view class="number_people">已选择 {{ selectedIds.length }}/{{ personLength }} 名员工</view>
                        </view>
                    </view>
                    <view class="placeholder"></view>
                </view>
            <!-- </view> -->
                <!-- 底部保存按钮 -->
                <view v-if="state.status == 0" class="button">
                    <s-button @netWork="editpop('remit')" :text="'一键打款'" v-if="fit == false"></s-button>
                    <s-button @netWork="cancel" :text="'取消'" v-else></s-button>
                </view>
            </view>
        </template>
        <!-- 设置金额弹出层 -->
        <s-public-models :show="popshows" :imagesucceedSrc="dataToinformaion.imageSrc"
            :click_type="dataToinformaion.click_type" :subtitle="dataToinformaion.subtitle"
            :distinction="dataToinformaion.distinction" @cancel="manhourClose" @affirm="manhourSubmit"
            :dialogStatus='false' :hint="dataToinformaion.hint"></s-public-models>
     <!-- 设置金额弹出层 代理商金额上限-->
     <s-public-models 
        :click_type="dataToinformaion.click_type" 
        :list="editAgentMoney_list" :show="agencyshows"
        :imagesucceedSrc="dataToinformaion.imageSrc" 
        :subtitle="dataToinformaion.subtitle" 
        :hint="dataToinformaion.hint"
        :editAgency="true" 
        @cancel="agencyMoneyClose" 
        @affirm="agencyMoneySubmit"></s-public-models>
   <!-- //加减弹窗 -->
   <add_subtract_popup
        :shows="add_subtract_show" 
        @cancel="addAndSubtractClose"
        @affirm="addAndSubtractSubmit" 
        :lists="add_subtract_money">
    </add_subtract_popup>
</fui-sticky>
</s-layout>
   

</template>
<script setup>
import { baseUrl } from '@/sheep/config';
import { onLoad, onPageScroll, onReachBottom,onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import sheep from "@/sheep";
import add_subtract_popup from './add_subtract_popup.vue';
import tools from '@/sheep/helper/tools.js';
// 获取系统信息
const { safeAreaInsets } = uni.getSystemInfoSync();
// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  width:''

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
    headstate.value.width = '100%'
  } else {
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
    headstate.value.width = 'calc(100% - 40rpx);'
  }
});


const schedule_id = ref()
const department_id = ref()
onLoad((options) => {
    listpagenumber.value = 1;
    list.value = []
    personLength.value = Number(0)
    schedule_id.value = options.schedule_id
    department_id.value = options.department_id
    getScheduleUserIndex()
   
 
});
// 加减班
const add_subtract_show = ref(false)
const add_subtract_money = ref()
const share_id = ref()
const addAndSubtract = (e) => {
    add_subtract_money.value =  e.agent_commission
    share_id.value = e.share_id
    add_subtract_show.value = true
}
const addAndSubtractClose = (e, i) => {
    add_subtract_show.value = false
    
}
const addAndSubtractSubmit = async (e, i) => {
    let params = {
        share_id: share_id.value,
        schedule_id: schedule_id.value,
        add_sub_type: i,
        money: e
    }
    const res = await sheep.$api.agency.editAgentByScheduleid(params);
    if (res.code == 1) {
        sheep.$helper.toast(res.msg)
        listpagenumber.value = 1;
        list.value =[]
        getScheduleUserIndex()
        add_subtract_show.value = false
    } else {
        sheep.$helper.toast(res.msg)
        add_subtract_show.value = false
    }
}

//代理商金额修改
const agencyshows = ref(false)
const editAgentMoney_list = ref()
const editAgentMoney_id = ref()
const editAgentMoney = (e) => {
    if (e.agent) {
        editAgentMoney_list.value = e.agent
        dataToinformaion.value.click_type = 'agencyCap'
    }else{
        editAgentMoney_list.value = e.schedule
        dataToinformaion.value.click_type = 'agency'
    }
   share_id.value = e.share_id
    editAgentMoney_id.value = e.id
    agencyshows.value = true
    dataToinformaion.value.subtitle = '修改代理金额'
    dataToinformaion.value.hint = '修改金额后会覆盖已修改的金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
}
const agencyMoneyClose = () => {
    agencyshows.value = false
}
// 取消按钮
const agencyMoneySubmit = async (e, i, a) => {
    let params = {
        share_id: share_id.value,
        schedule_id: schedule_id.value,
        agent_man_salary_max: e,
        agent_woman_salary_max: a
    }
    const res = await sheep.$api.agency.editAgentByScheduleid(params);
    if (res.code == 1) {
        sheep.$helper.toast(res.msg)
        list.value =[]
        listpagenumber.value = 1;
        getScheduleUserIndex()
        agencyshows.value = false
    } else {
        sheep.$helper.toast(res.msg)
        agencyshows.value = false
    }
}
//批量设置
const batchSetting = () => {
    fit.value = !fit.value
}

//搜索
const keyword = ref()
const searchKeyWord = (srarch_value) => {
    list.value = []
    checkAll.value = false
    listpagenumber.value = 1;
    selectedSalay.value = []
    selectedIds.value = []
    keyword.value = srarch_value
    personLength.value = Number(0)
    getScheduleUserIndex()
}
//请求数据
//人员列表
const state = ref({
    menulist: [
        { name: '未结算', value: '0' },
        { name: '已结算', value: '1' },
        { name: '结算中', value: '2' }
    ],
    currentTab: '0',
    status: '0'
})
//点击切换菜单  
const fit = ref(false)
const menulistclick = (item) => {
    personLength.value = 0
    list.value = [];
    listpagenumber.value = 1;
    state.value.status = item.value;
    checkAll.value = false
    personLength.value = Number(0)
    selectedIds.value = []
    getScheduleUserIndex()
}
const personLength = ref(Number(0))
const list = ref([])//代理上列表
const totals = ref(0)//总金额
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const getScheduleUserIndex = async () => {
    uni.showLoading({ title: '加载中' });
    let params = {
        filter: JSON.stringify({
            'user.nickname': keyword.value,
            state: state.value.status,
        }),
        op: JSON.stringify({
            'user.nickname': 'LIKE',
            state: '=',
        }),
        schedule_id: schedule_id.value,
        page: listpagenumber.value,
    }
    
    const res = await sheep.$api.project.getScheduleUserIndex(params);
    if (res.code == 1) {
        uni.hideLoading()
        listPage.value = res.data.current_page
        listlast_page.value = res.data.last_page
        personLength.value = 0
        popshows.value = false
        add_subtract_show.value = false
        totals.value = 0
        list.value =  [...list.value, ...res?.data.rows];
        list.value.forEach(items => {
            // 总数 总人数
            items.list.forEach(i => {
                totals.value += Number(i.salary)
            })
            totals.value += Number(items.agent_commission)
         
            personLength.value += items.list.length
            return personLength.value, totals.value
        })
    } else {
        uni.hideLoading()
        sheep.$helper.toast(res.msg);
    }
}

//滚动触底
const loadmoreRef = ref()

onReachBottom((e)=>{
  loadmoreRef.value.PopupScrolltolower() // 加载更多
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
        checkAll.value = false
        selectedIds.value = []
        selectedSalay.value = []
        list.value.forEach(item => {
            item.list.forEach((element, index) => {
                element.is_selected = false
                
            });
        });
  } else {
    return;
  }
  getScheduleUserIndex()
})
onPullDownRefresh(() => {
    listpagenumber.value = 1;
        checkAll.value = false
        selectedIds.value = []
        selectedSalay.value = []
        list.value.forEach(item => {
            item.list.forEach((element, index) => {
                element.is_selected = false
                
            });
        });
  getScheduleUserIndex()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 500);
})


// 多选  total.value 总共多少条数据
const selectedSalay = ref([])
const moreSelect = (item) => {
    item.is_selected = !(item?.is_selected)
    const index = selectedIds.value.indexOf(item.id);
    if (index === -1) {
        selectedIds.value.push(item.id);
        selectedSalay.value.push(Number(item.salary))
        if (selectedIds.value.length == personLength.value) {
            checkAll.value = true
        }
    } else {
        selectedIds.value.splice(index, 1);
        selectedSalay.value.splice(index, 1)
        if (selectedIds.value.length !== personLength.value) {
            checkAll.value = false
        }
    }
}

// 全选
const checkAll = ref(false)
const selectedIds = ref([])
// 全选交互逻辑
const checkAllInteraction = () => {
    selectedIds.value = []
    if (checkAll.value === false) {
        list.value.forEach(item => {
            item.list.forEach(element => {
                selectedIds.value.push(element.id);
                selectedSalay.value.push(Number(element.salary))
                element.is_selected = true
            });
        });
    } else {
        list.value.forEach(item => {
            item.list.forEach((element, index) => {
                element.is_selected = false
                selectedSalay.value = []
            });
        });
    }
    checkAll.value = !checkAll.value
}


// 工时输入框
const labor_hour_change = (item, e) => {
    man_hour.value = e
    totalids.value = item.id
    uni.$u.throttle(() => {
        amendEdit('man_hour')
    }, 500)

};
// 金额输入框
const money_change = (item, e) => {
    salary.value = e
    totalids.value = item.id
    uni.$u.throttle(() => {
        amendEdit('salary')
    }, 500)
};
//工时弹窗
const popshows = ref(false)
const dataToinformaion = ref({
    subtitle: '批量设置金额',
    imageSrc: '',
    hint: '',
    distinction: '',
    click_type: ''
})

//工时提交
const manhourSubmit = (e, i) => {
    uni.$u.throttle(async () => {
        if (i == 'man_hour') {
            //工时
            man_hour.value = e
            amendEdit(i)
        } else if (i == 'salary') {
            // 金额
            salary.value = e
            amendEdit(i)
        } else {
            //提交数据 一键打款
            if (e) {
                let params = {
                    memo: e,
                    schedule_id: schedule_id.value,
                }
                const res = await sheep.$api.project.postScheduleUserRemit(params);
                if (res.code == 1) {
                    sheep.$helper.toast(res.msg);
                    // #ifdef MP
                    sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice', 'apply_result_notice','task_pay_notice']);
                    // #endif
                    // setTimeout(function () {
                    //     sheep.$router.back(true)
                    // }, 1000);
                    sheep.$router.go('/pages/staff/project/project')
                } else {
                    sheep.$helper.toast(res.msg);
                }
            } else {
                sheep.$helper.toast('请填写打款备注')
            }

        }
    }, 5000)
}
const manhourClose = (e, i) => {
    man_hour.value = ''
    salary.value = ''
    popshows.value = e
}
// 批量修改金额弹窗
const editpop = (e) => {
    if (e == 'man_hour' || e == 'salary') {
        if (selectedIds.value.length !== 0 || checkAll.value == true) {
            popshows.value = true
            dataToinformaion.value.click_type = 'other'
            dataToinformaion.value.subtitle = e == 'man_hour' ? '设置员工工时' : '批量设置金额'
            dataToinformaion.value.hint = e == 'man_hour' ? '批量设置会覆盖已修改的员工工时！' : '批量设置无权修改代理商金额，同时会覆盖已修改的员工金额！'
            dataToinformaion.value.distinction = e == 'man_hour' ? 'man_hour' : 'salary'
            dataToinformaion.value.imageSrc = e == 'man_hour' ? '/uploads/uniapp_image/user/piliangshezhi_img_bg3.png' : '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
        } else {
            sheep.$helper.toast('请选择员工,再进行操作');
        }
    } else {
        popshows.value = true
        dataToinformaion.value.subtitle = '备注'
        dataToinformaion.value.click_type = 'other'
        dataToinformaion.value.hint = '提交打款申请后，任务将终止且无法继续报名'
        dataToinformaion.value.distinction = 'remit'
        dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
    }
}
//批量修改工时金额
const salary = ref()
const man_hour = ref()
const totalids = ref()
const amendEdit = async (i) => {
    let params = {
        ids: totalids.value || selectedIds.value.join(','),
        schedule_id: schedule_id.value
    }
    if (i == 'man_hour') {
        params.man_hour = man_hour.value
    } else {
        params.salary = salary.value,
            params.batch = 1
    }
    const res = await sheep.$api.project.postScheduleUserEdit(params);
    if (res.code == 1) {
        sheep.$helper.toast(res.msg);
        setTimeout(() => {
            personLength.value = Number(0)
            listpagenumber.value = 1;
            selectedSalay.value = []
            list.value = []
            selectedIds.value = []
            totalids.value = ''
            checkAll.value = false
            popshows.value = false
            getScheduleUserIndex();
        }, 500)
    } else {
        sheep.$helper.toast(res.msg);
    }

}
//取消  修改 
const cancel = () => {
    fit.value = false
    list.value = []
    listpagenumber.value =1
    getScheduleUserIndex()
    personLength.value = Number(0)
    selectedSalay.value = []
    selectedIds.value = []
    totalids.value = ''
    checkAll.value = false

}
// 拨打电话
const dialPhone = (item) => {
    tools.callPhone(item.user.mobile) 
}
</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}
// 版心
.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
}
:deep(.u-form-item__body.data-v-b4fd400b) {
    padding: 20rpx 0 20rpx 30rpx;
}
:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
    font-weight: $uni-font-weight;
}
:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
    margin-left: 200rpx !important;
}
// 最大盒子
.max-box {
    width: 100%;
}

// 头部盒子
.top_box {
    height: 150rpx;
    background-color: #ffffff;
    // padding: 20rpx 0;
}

// 空白盒子
.blank_box {
    display: flex;
    width: 90%;
    margin: 20rpx auto 0 auto;
    justify-content: space-between;
    align-items: center;

    .blank_box_btn {
        height: 70rpx;
        width: 300rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;

        &:last-child {
            image {
                width: 32rpx;
                height: 28rpx;
            }
        }

        image {
            width: 30rpx;
            height: 30rpx;
        }

        view {
            color: $uni-color-primary;
            font-weight: 500;
            font-size: $uni-font-size-base;
            margin-left: 10rpx;
        }
    }
}

//批量管理
.blank_box_button {
    display: flex;
    height: 110rpx;
    width: calc(100% - 40rpx);
    margin: 0rpx auto 0 auto;
    justify-content: space-between;
    align-items: center;

    .blank_box_btn {
    //    margin-top: 20rpx;
        height: 70rpx;
        width: 100%;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;

        image {
            width: 30rpx;
            height: 30rpx;
        }

        view {
            color: #0038F7;
            font-weight: 500;
            font-size: $uni-font-size-base;
            margin-left: 10rpx;
        }
    }
}

// 列表
.add_area {
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
   
}

.scroll_box {
 
    padding-bottom: 150rpx !important;

}

// 共计金额
.Total_box {
    margin: 0rpx auto 0 auto;
    width:calc(100% - 40rpx);
    height: 104rpx;
    background-color: #fff;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #efefef;
    // 左侧
    .Total_box_left {
        display: flex;
        align-items: center;
        z-index: 0 !important;
        .Total_staff {
            font-family: PingFangSC;
            color: #000000;
            font-weight: 700;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;

            text {
                color: $uni-color-primary;
            }
        }
    }

    .Total_staff:first-child {
        margin-right: 20rpx;
        margin-left: 30rpx;
    }

    // 右侧
    .Total_box_right {
        display: flex;
        align-items: center;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: 700;
        font-size: $uni-font-size-base;
        font-style: normal;
        text-decoration: none;
        margin-right: 30rpx;

        .image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}

// 列表项
.list_item {
    height: 154rpx;
    display: flex;
    align-items: center;
    margin: 0 30rpx 40rpx 30rpx;
    position: relative;

    // border-bottom: 2rpx solid #efefef;
    // 选择图标
    .select_image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 22rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 头像盒子
    .head_box {
        width: 104rpx;
        height: 104rpx;

        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    // 信息盒子
    .message_box {
        margin-left: 20rpx;

        .message_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 4rpx;
        }

        .message_identity {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 400;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 10rpx;
            display: flex;
            .phone_image {
                margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .mes_flex {
            display: flex;
            height: 40rpx;
            align-items: center;
        }

        .message_time {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            display: flex;

            view {
                margin-right: 15rpx;
            }
        }


    }

    .add_right {
        position: absolute;
        top: 32rpx;
        right: 0;
        z-index: 1;
    }

    // 金额
    .gold_coin {
        width: 156rpx;
        height: 52rpx;
        padding-left: 20rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: 400;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        border-radius: 8rpx;
        text-align: center;
        line-height: 52rpx;
        background-color: #F9FBFF;
        border: 1rpx solid rgba(0, 56, 247, 0.3);
        box-shadow: 0 1rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;

        image {
            width: 20rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }
    }

    .disabled_gold_coin {
        width: 156rpx;
        height: 52rpx;
        padding-left: 20rpx;
        color: #F7AF00;
        font-weight: 400;
        font-size: $uni-font-size-26;
        display: flex;
        align-items: center;
        &:last-child{
            width: auto;
            color: #0038F7;
        }
    }

    .yellow {
        background-size: 30rpx 30rpx;
        background-position: 2rpx 50%;
        background-repeat: no-repeat;
        margin-top: 8rpx;
        border-radius: 8rpx;
        background-color: #FFFBF9;
        border: 1rpx solid rgba(247, 138, 0, 0.3);
        box-shadow: 0 1rpx 8rpx 0 rgba(0, 0, 0, 0.05);

        :deep(.u-input__content__field-wrapper__field) {
            text-align: center !important;
        }

        text {
            color: #F7AF00;
            margin-right: 6rpx;
        }
    }
}

.list_item:first-child {
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    margin-top: 30rpx;
    
}

.list_item:last-child {
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    margin-bottom: 0;
}



// 末尾盒子 (此盒子没有  “父相 ” 如要改动请按需更改)
.end_box {
    position: fixed;
    bottom: 0;
    z-index: 98;
    height: 244rpx;
    width: 100%;

    // 全选按钮盒子
    .check_all_box {
        height: 80rpx;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        border: 2rpx solid #efefef;

        // 全选按钮
        .check_all_button {
            display: flex;
            margin-left: 52rpx;
            align-items: center;
            font-family: PingFangSC;
            color: #0239f7;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }

        // 已选择
        .selected_box {
            display: flex;
            margin-right: 40rpx;
            align-items: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }
    }

    .supervisor_state {
        display: flex;
        margin-left: 52rpx;
        align-items: center;
        font-family: PingFangSC;
        color: #0239f7;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-base;
        font-style: normal;
        text-decoration: none;
    }

    // 占位盒子
    .placeholder {
        height: 32rpx;
        width: 100%;
        background-color: #ffffff;
    }
}

// 全选图标
.select_image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 22rpx;

    image {
        width: 100%;
        height: 100%;
    }
}
// 执照员工代理商
.list_item_title {
    padding-left: 16rpx;
    height: 80rpx;
    // margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .left {
        display: flex;

        .image_box {
            width: 108rpx;
            height: 44rpx;
            margin-left: 20rpx;
            border-radius: 12rpx;
            background-color: #F4F7FF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0038F7;
            font-weight: 500;
            font-size: 24rpx;
        }
    }

    .right {
        padding-right: 6rpx;
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;

        text {
            color: #0038F7;
        }
    }

    image {
        width: 30rpx;
        height: 30rpx;
    }

    .titlename {
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;
        margin-left: 10rpx;
    }
}

:deep(.gold_coin) {
    .u-input--square {
        padding: 0 10rpx !important
    }
}

// 头部盒子

.menu {
    height: 80rpx;
    background: $uni-bg-color;
    width: 100%;
    margin: 0;

    :deep(.u-tabs__wrapper__nav__item) {
        width: 26%;
    }

    :deep(.u-tabs__wrapper__nav__line) {
        width: 30rpx !important;
        height: 8rpx !important;
        border-radius: 4rpx !important;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
    }
}

.nocontent {
    margin: 0 auto;
    width: calc(100% - 40rpx);
    background-color: #fff;
    padding-bottom: 50rpx;
    border-bottom-left-radius: 18rpx;
    border-bottom-right-radius: 18rpx;
}

.button_box {
    padding-top: 30rpx !important;
   
}

:deep(.u-radio-group--column) {
    flex-direction: row !important;
    justify-content: space-between;
    width: 76%;
}

// 代理商金额修改
.agent_money {
    display: flex;
    width: calc(100% - 80rpx);
    height: 52rpx;
    border-radius: 8rpx;
    background-color: #F9FBFF;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx auto;
    padding: 0 20rpx;

    .left {
        display: flex;
        .button{
            width: 70rpx;
            color: #FFFFFF;
            font-weight: 400;
            font-size: 20rpx;
            height:28rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FF5100;
        }
        // 已设置
.have_set {
  font-family: PingFangSC;
  color: #0038F7;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FFFFFF;
  border: 1px solid #0038F7;
  width: 70rpx;
  height: 28rpx;
}

// 未设置
.Is_not_set {
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FF5100;
  width: 70rpx;
  height: 28rpx;
}
        image {
            width: 20rpx;
            height: 20rpx;
        }

        .left_title {
            color: #333333;
            font-weight: 500;
            font-size: 22rpx;

            text {
                color: #FF0000;
            }
        }
    }

    .right {
        display: flex;
        color: #0038F7;
        font-weight: 500;
        font-size: 22rpx;
        align-items: center;

        image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
        }
    }
}
.content{
    margin-top: 178rpx;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    .button{
        flex: 1;
    }
    .add_area{
        flex: 1; 
    }
}
.scroll_box {
    :deep(.fui-sticky__fixed){
    z-index: 2 !important;
}
}
.add_area {
    :deep(.fui-sticky__fixed){
    z-index: 2 !important;
}
}

:deep(.button_box){
    z-index: 99 !important;
}
:deep(#fui_gcmo){
    z-index: 998 !important;
}
:deep(.fui-sticky__wrap) {
    z-index: 1 !important;
}
</style>